<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item>
						<el-button type="primary" @click="addAgent('add',{})">
							<el-icon>
								<ele-Plus />
							</el-icon> 新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" row-key="id" ref="goodTableRef" v-loading="state.loading">
						<el-table-column label="ID" width="90">
							<template #default="scope">
								<span>{{ scope.row.agentLevelId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="代理图标" align="center">
							<template #default="scope">
								<el-image style="width:32px;height: 32px;" :src="scope.row.agentLevelAvatar" fit="cover" />
							</template>
						</el-table-column>
						<el-table-column label="代理名称" >
							<template #default="scope">
								<span>{{ scope.row.agentName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="代理人数" align="center">
							<template #default="scope">
								<span>{{ scope.row.agentTotal }}</span>
							</template>
						</el-table-column>

						<el-table-column label="已代理" >
							<template #default="scope">
								<span>{{ scope.row.agentNormalNum }}</span>
							</template>
						</el-table-column>

						<el-table-column label="申请中" >
							<template #default="scope">
								<span>{{ scope.row.agentApplyNum }}</span>
							</template>
						</el-table-column>
						<el-table-column label="充值权限" >
							<template #default="scope">
								<span>{{ scope.row.agentIsRecharge == 0 ? '无权限' : '有权限'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="加入条件" >
							<template #default="scope">
								<span>{{ scope.row.agentTaskType == 0 ? '首次进货' : '首次充值'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="进货折扣" >
							<template #default="scope">
								<span>{{ scope.row.agentTaskPurchaseDiscountValue }} %</span>
							</template>
						</el-table-column>
						<el-table-column label="创建人" >
							<template #default="scope">
								<span>{{ scope.row.createBy }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" >
							<template #default="scope">
								<span>{{ formatDate(new Date(scope.row.createTime), 'YYYY-mm-dd HH:MM:SS') }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" >
							<template #default="scope">
								<el-link class="font16" :underline="false" type="primary" @click="addAgent('edit',scope.row)">编辑</el-link>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<el-link class="font16" :underline="false" type="primary" @click="deleteHandle('edit',scope.row)">删除</el-link>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="pagesTree">
import { onMounted, reactive, ref,defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { agentList,agentDelete } from "/@/api/agent";
import { ElMessageBox, ElMessage } from 'element-plus';
import { formatDate } from '/@/utils/formatTime';

const router = useRouter();
// 定义变量内容
const state = reactive({
	loading: false,
	tableData: [] as Array<any>
});

// 获取商品品牌列表
const getAgentList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	const { results } = await agentList();
	state.tableData = results;
	state.loading = false;
}

// 打开代理新增或者编辑界面
const addAgent = (type: string, row ?: any) => {
	router.push({
		path: '/agent/level/add',
		query: { status: type, id: row.agentLevelId},
	});
};

// 代理删除
const deleteHandle = (index: number,row: any) => {
	ElMessageBox.confirm( '确定删除该代理等级?','提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	} ).then( async () => {
		const { ok } = await agentDelete(row.agentLevelId);
		if(ok){
			state.tableData.splice(index,1)
			return ElMessage.success('删除成功');
		}
    }).catch(() => {

    })
}

// 页面加载时
onMounted(() => {
	getAgentList();
});

</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>

